<template>
  <view class="textContainer">
    <view class="textTitle spaceBetween">
      <!-- <view class="titleFlag"></view><text>{{ title }}</text> -->
      <view style="display: flex; align-items: center">
        <view class="titleFlag"></view><text>{{ title }}</text>
      </view>
      <view class="morePos" @click="onClickMoreCase()"
        ><span class="styleTextMoreJob"
          >更多{{ showType == 'pole' ? '标杆' : '报告' }}</span
        >
        <img class="styleImageMoreJob" :src="arrowRight" />
      </view>
    </view>
    <view class="benchmark" v-if="benchmark.length > 0">
      <view
        class="father"
        v-for="item in benchmark"
        :key="item.mpaActivityId"
        @click="onClickBenchmarkItem(item)"
      >
        <view
          class="left"
          :style="{ backgroundImage: 'url(' + item.bannerUrl + ')' }"
        ></view>
        <view class="right">
          <view class="title">{{ item.activityName }}</view>
          <view class="desc">{{ item.activityIntroduce }}</view>
          <view class="tips">
            <span
              v-for="(tip, index) in getSplitTag(item.activityTags)"
              :key="index"
              >{{ tip }}</span
            >
          </view>
          <view v-if="false" class="number">
            <img :src="viewSrc" />
            <text>{{ kFormatter(item.activityViewNum) }}</text>
          </view>
        </view>
      </view>
    </view>
    <view v-else class="emptyLoading">
      <u-loading mode="circle" size="50" v-if="loading"></u-loading>
      <Empty
        v-else
        :baseImg="emptyImg"
        text="暂无数据"
        :fontWeight="400"
        textColor="#bfbfbf"
        class="empty"
        spacing="0"
      />
    </view>
  </view>
</template>
<script>
import { getLayerDetailsData } from '@/api/modules/career';
import Empty from '@/components/Empty.vue';
import CryptoJS from 'crypto-js';
export default {
  props: {
    jobName: {
      type: String,
      default: ''
    },
    positionId: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: '标题'
    },
    layerId: {
      type: String,
      default: null
    },
    isCollect: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Empty
  },
  data() {
    return {
      showType: '',
      loading: false,
      emptyImg: this.$imgBaseSelf + 'common/empty.png',
      arrowRight:
        this.$imgBaseSelf + 'career/positionDictionary/job_detail_more_job.png',
      benchmark: [],
      viewSrc:
        this.$imgBaseSelf +
        'career/positionDictionary/job_detail_benchmark_view.png',
      moreLayerId: ''
    };
  },
  mounted() {
    this.getLayerDetail();
  },
  // onShow() {
  //   this.getLayerDetail();
  // },
  computed: {
    formattedDate: function () {
      var today = new Date(); //获取当前时间
      var month = (today.getMonth() + 1).toString().padStart(2, '0'); //获取月份，不足两位的前面补0
      var year = today.getFullYear().toString().substr(0); //获取年份的后两位
      var day = today.getDate().toString().padStart(2, '0'); //获取天数，不足两位的前面补0

      return `${year}-${month}-${day}`; //拼接成mm-yy-dd的格式
    }
  },
  methods: {
    kFormatter(num) {
      if (num >= 10000 && num < 1000000) {
        return (num / 1000).toFixed(1) + 'K';
      } else if (num >= 1000000) {
        return (num / 1000000).toFixed(1) + 'M';
      }
      return num;
    },
    getLayerDetail() {
      if (!this.layerId) return;
      this.loading = true;
      console.log('getRecommendCase');
      const params = {
        id: this.positionId,
        layerIds: this.layerId,
        personId: uni.getStorageSync('person-id').slice(2) || ''
      };
      getLayerDetailsData(params)
        .then((res) => {
          if (res.code == 200) {
            this.showType = res.data[0].showType;
            console.log('this.showType', this.showType);
            this.benchmark = res.data[0].children[0].children[0].data;
            this.moreLayerId = res.data[0].children[0].children[0].layerId;
          } else {
            console.log('请求失败');
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getSplitTag(tags) {
      return tags.split(',');
    },
    onClickBenchmarkItem(item) {
      console.log('item', item, this.showType);
      let url =
        '/pagesSub/companyCenter/case/detail?id=' +
        item.mpaActivityId +
        '&&positionId=' +
        this.positionId +
        '&&isFromZhishenji=' +
        1 +
        '&&isGetCollect=' +
        1 +
        '&&showType=' +
        this.showType;
      if (item.isBuy == 1) {
        //如果是1那就要传sourceFrom,2则不需要
        url +=
          '&&sourceFrom=' + this.encrypt('zhishenji' + this.formattedDate, '');
      }

      uni.navigateTo({
        url
      });
    },
    encrypt(word, keyStr) {
      // word, keyStr第一个参数是加密的字段名字  第二个是key值（16位）
      keyStr = keyStr || '*%&^%$&*()347845'; // 密文（密钥）
      var key = CryptoJS.enc.Utf8.parse(keyStr);
      var srcs = CryptoJS.enc.Utf8.parse(word);
      var encrypted = CryptoJS.AES.encrypt(srcs, key, {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
      });

      return encrypted.toString();
    },
    // 解密
    decrypt(word, keyStr) {
      keyStr = keyStr || '*%&^%$&*()347845';
      var key = CryptoJS.enc.Utf8.parse(keyStr); // Latin1 w8m31+Yy/Nw6thPsMpO5fg==
      var decrypt = CryptoJS.AES.decrypt(word, key, {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
      });
      return CryptoJS.enc.Utf8.stringify(decrypt).toString();
    },
    onClickMoreCase() {
      uni.navigateTo({
        url:
          '/pagesSub/career/moreJobCase/index?positionId=' +
          this.positionId +
          '&name=' +
          this.jobName +
          '&layerId=' +
          this.moreLayerId +
          '&isCollect=' +
          this.isCollect +
          '&showType=' +
          this.showType
      });
    }
  }
};
</script>
<style scoped lang="scss">
.textContainer {
  margin-top: 24rpx;
  margin-left: 32rpx;
  margin-right: 32rpx;
  padding-top: 24rpx;
  padding-bottom: 24rpx;
  padding-left: 28rpx;
  padding-right: 28rpx;
  background: #ffffff;
  border-radius: 24rpx;

  .spaceBetween {
    justify-content: space-between;
  }
  .textTitle {
    display: flex;
    align-items: center;
    font-size: 32rpx;
    font-family: PingFang-SC-Heavy, PingFang-SC;
    font-weight: 800;
    color: #222222;
    line-height: 44rpx;

    .titleFlag {
      width: 8rpx;
      height: 36rpx;
      border-radius: 64rpx;
      background-color: #f75a3e;
      margin-right: 16rpx;
    }
    .morePos {
      display: flex;
      flex-direction: row;
      align-items: center;

      .styleTextMoreJob {
        color: #999999;
        font-size: 24rpx;
        font-weight: 300;
      }

      .styleImageMoreJob {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }

  .benchmark {
    margin-top: 20rpx;
    width: 100%;

    .father {
      display: flex;
      padding: 24rpx 0;
      width: 100%;

      .left {
        width: 154rpx;
        height: 168rpx;
        border-radius: 8rpx;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
      }

      .right {
        margin-left: 36rpx;
        flex: 1;
        min-width: 0;

        .title {
          font-weight: bold;
          color: #222222;
          font-size: 28rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .desc {
          color: rgba(0, 0, 0, 0.5);
          font-size: 26rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-top: 4rpx;
        }

        .tips {
          display: flex;
          margin-top: 14rpx;

          span {
            margin-right: 16rpx;
            font-size: 20rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #555555;
            background: #f5f5f5;
            padding: 6rpx 12rpx;
            border-radius: 4rpx;
          }
        }

        .number {
          display: flex;
          align-items: center;
          margin-top: 20rpx;

          img {
            width: 32rpx;
            height: 24rpx;
            margin-right: 16rpx;
          }

          text {
            font-size: 24rpx;
            color: #bfbfbf;
          }
        }
      }
    }
  }
}
.emptyLoading {
  height: 450rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
